<template>
	<view class="withdrawal-page">
		<div class="item" v-for="(item,index) in renderData.list" :key="index">
			<div class="title">
				<div class="text">账户提现</div>
				<div class="tag success">提现成功</div>
			</div>
			<div class="money">
				<div class="tip">提现金额</div>
				<div class="num">￥{{item.withdrawalAmount|moneyTransformString}}</div>
			</div>
			<div class="progress">
				<div class="left">提现进程</div>
				<div class="right">
					<uni-steps :options="item.options" direction='column' active-color="#36b457" :active="2" />
					<div class="tip">如有疑问可拨打95516咨询</div>
				</div>
			</div>
			<div class="info">
				<div class="info-item">
					<div class="label">提现账号</div>
					<div class="content">{{item.withdrawAccount}}</div>
				</div>
				<div class="info-item">
					<div class="label">提现单号</div>
					<div class="content">{{item.withdrawalNumber}}</div>
				</div>
				<div class="info-item">
					<div class="label">申请时间</div>
					<div class="content">{{item.applicationTime}}</div>
				</div>
				<div class="info-item">
					<div class="label">完成时间</div>
					<div class="content">{{item.completeTime}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		props: {
			isDisplay: {
				type: Boolean,
				default: false,
			},
			configureData: {
				type: Object,
			},
		},
		data() {
			return {
				data: {},
			}
		},
		computed: {
			renderData() {
				if (this.isDisplay) {
					// console.log(this.configureData);
					return this.configureData
				}
				// console.log(this.data);
				return this.data
			},
		},
		onLoad() {
			this.getData('withdrawalData')
		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.withdrawal-page {
		background-color: #f1f1f1;
		overflow: hidden;

		.item {
			background-color: #fff;
			padding: 0 15px;
			margin-bottom: 10px;
		}

		.title {
			height: 50px;
			display: flex;
			align-items: center;

			.text {
				color: #000;
				font-weight: bold;
				font-size: 16px;
			}

			.tag {
				border: 1px solid #40c477;
				font-size: 12px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				padding: 0 6px;
				margin-left: 10px;
				color: #40c477;
			}


		}

		.money {
			padding-bottom: 32px;
			border-bottom: 1px dashed #ddd;

			.tip {
				color: #777;
				font-size: 12px;
				display: flex;
				justify-content: center;
			}

			.num {
				color: #000;
				font-weight: bold;
				font-size: 30px;
				display: flex;
				justify-content: center;
			}
		}

		.progress {
			display: flex;
			justify-content: space-between;

			.left {
				height: 32px;
				line-height: 32px;
				width: 6em;
				color: #777;
				font-size: 14px;
			}

			.right {
				flex: 1;
				position: relative;
				padding-bottom: 10px;

				.tip {
					position: absolute;
					bottom: 0px;
					color: #b7bdc6;
					font-size: 12px;
					transform: translateX(30px);
				}

				::v-deep .uni-steps {
					.uni-steps__column-text {
						border-bottom-width: 0;
						margin-top: 5px;

						.uni-steps__column-desc {
							color: #000;
							margin-top: 3px;
						}
					}

					.uni-steps__column-container {
						position: relative;
						top: 6px;
					}
				}
			}
		}

		.info {
			padding-top: 10px;
			overflow: hidden;

			.info-item {
				display: flex;
				align-items: center;
				height: 32px;
				font-size: 14px;

				.label {
					width: 6em;
					color: #777;
				}

				.content {
					font-weight: bold;
					color: #000;
					flex: 1;
				}
			}
		}
	}
</style>
